<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">监控详情</div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <div class="list">
          <div class="tabs" v-if="state.pm.templateId == 'SP' || state.pm.templateId == 'ZP'">
            <el-button class="btn" :class="state.iinx == 1 ? 'cusb2' : 'cusb1'" @click="state.iinx = 1">标签详情</el-button>
            <el-button class="btn" v-if="state.pm.templateId == 'ZP'" :class="state.iinx == 2 ? 'cusb2' : 'cusb1'"
              @click="state.iinx = 2">统计分析</el-button>
            <el-button class="btn" :class="state.iinx == 3 ? 'cusb2' : 'cusb1'" @click="state.iinx = 3">基本信息</el-button>
          </div>
          <div class="xq" v-if="state.iinx == 1">
            <div class="txt">标签类别</div>
            <div>
              <el-input v-model="state.pm.categoryName" readonly></el-input>
            </div>
            <div class="txt">标签名称</div>
            <div>
              <el-input v-model="state.pm.tagName" readonly></el-input>
            </div>
            <div class="txt"
              v-if="state.pm.templateId == 'WZ' || state.pm.templateId == 'TW' || state.pm.templateId == 'BHQ'">标签描述</div>
            <div class="txt3"
              v-if="state.pm.templateId == 'WZ' || state.pm.templateId == 'TW' || state.pm.templateId == 'BHQ'">
              {{ state.pm.tempTextdesc }}
            </div>

            <div class="txt"
              v-if="state.pm.templateId == 'CBTKQ' || state.pm.templateId == 'JMQ' || state.pm.templateId == 'TCC'">统计数量
            </div>
            <div class="txt4"
              v-if="state.pm.templateId == 'CBTKQ' || state.pm.templateId == 'JMQ' || state.pm.templateId == 'TCC'">
              <div class="card" v-for="(item, inx) in state.data4.find(x => x.tp == state.pm.templateId)?.data"
                :key="inx">
                <div class="yuan">{{ item.v }}</div>
                <div class="btit">{{ item.nm }}</div>
              </div>
            </div>
            <div class="txt"
              v-if="state.pm.templateId == 'CBTKQ' || state.pm.templateId == 'JMQ' || state.pm.templateId == 'TCC' || state.pm.templateId == 'JYXF' || state.pm.templateId == 'BHQ'">
              统计表格
            </div>
            <div class="txt5"
              v-if="state.pm.templateId == 'CBTKQ' || state.pm.templateId == 'JMQ' || state.pm.templateId == 'TCC' || state.pm.templateId == 'JYXF' || state.pm.templateId == 'BHQ' || state.pm.templateId == 'BGQ'">
              <div v-if="state.pm.templateId == 'CBTKQ'">
                <div class="head">
                  <span style="width:40%">舷号</span>
                  <span style="width:30%">进港数量</span>
                  <span style="width:30%">出港数量</span>
                </div>
                <div :class="'row' + inx % 2"
                  v-for="(item, inx) in state.data5.find(x => x.tp == state.pm.templateId)?.data" :key="inx">
                  <span style="width:40%">{{ item.v1 }}</span>
                  <span style="width:30%">{{ item.v2 }}</span>
                  <span style="width:30%">{{ item.v3 }}</span>
                </div>
                <div class="row1" v-if="(state.data5.find(x => x.tp == state.pm.templateId)?.data||[]).length==0">
                  <span style="width:100%;">暂无数据</span>
                </div>
              </div>
              <div v-if="state.pm.templateId == 'JMQ'">
                <div class="head">
                  <span style="width:50%">年龄</span>
                  <span style="width:25%">男性</span>
                  <span style="width:25%">女性</span>
                </div>
                <div :class="'row' + inx % 2"
                  v-for="(item, inx) in state.data5.find(x => x.tp == state.pm.templateId)?.data" :key="inx">
                  <span style="width:50%">{{ item.v1 }}</span>
                  <span style="width:25%">{{ item.v2 }}</span>
                  <span style="width:25%">{{ item.v3 }}</span>
                </div>
                <div class="row1" v-if="(state.data5.find(x => x.tp == state.pm.templateId)?.data||[]).length==0">
                  <span style="width:100%;">暂无数据</span>
                </div>
              </div>
              <div v-if="state.pm.templateId == 'JYXF'">
                <div class="head">
                  <span style="width:75%">设备名称</span>
                  <span style="width:25%">数量</span>
                </div>
                <div :class="'row' + inx % 2"
                  v-for="(item, inx) in state.data5.find(x => x.tp == state.pm.templateId)?.data" :key="inx">
                  <span style="width:75%">{{ item.v1 }}</span>
                  <span style="width:25%">{{ item.v2 }}</span>
                </div>
                <div class="row1" v-if="(state.data5.find(x => x.tp == state.pm.templateId)?.data||[]).length==0">
                  <span style="width:100%;">暂无数据</span>
                </div>
              </div>
              <div v-if="state.pm.templateId == 'BGQ'">
                <div class="head">
                  <span style="width:60%">企业名称</span>
                  <span style="width:40%">联系电话</span>
                </div>
                <div :class="'row' + inx % 2"
                  v-for="(item, inx) in state.data5.find(x => x.tp == state.pm.templateId)?.data" :key="inx">
                  <span style="width:60%">{{ item.v1 }}</span>
                  <span style="width:40%">{{ item.v2 }}</span>
                </div>
                <div class="row1" v-if="(state.data5.find(x => x.tp == state.pm.templateId)?.data||[]).length==0">
                  <span style="width:100%;">暂无数据</span>
                </div>
              </div>
              <div v-if="state.pm.templateId == 'BHQ'">
                <div class="head">
                  <span style="width:60%">时间</span>
                  <span style="width:40%">流量</span>
                </div>
                <div :class="'row' + inx % 2"
                  v-for="(item, inx) in state.data5.find(x => x.tp == state.pm.templateId)?.data" :key="inx">
                  <span style="width:60%">{{ item.v1 }}</span>
                  <span style="width:40%">{{ item.v2 }}</span>
                </div>
                <div class="row1" v-if="(state.data5.find(x => x.tp == state.pm.templateId)?.data||[]).length==0">
                  <span style="width:100%;">暂无数据</span>
                </div>
              </div>
              <div v-if="state.pm.templateId == 'TCC'">
                <div class="head">
                  <span style="width:40%">车牌号</span>
                  <span style="width:60%">告警详情</span>
                </div>
                <div :class="'row' + inx % 2"
                  v-for="(item, inx) in state.data5.find(x => x.tp == state.pm.templateId)?.data" :key="inx">
                  <span style="width:40%">{{ item.v1 }}</span>
                  <span style="width:60%">{{ item.v2 }}</span>
                </div>
                <div class="row1" v-if="(state.data5.find(x => x.tp == state.pm.templateId)?.data||[]).length==0">
                  <span style="width:100%;">暂无数据</span>
                </div>
              </div>
            </div>

            <div class="txt6" v-if="state.pm.templateId == 'CBTKQ' || state.pm.templateId == 'JMQ'">
              <div class="chart" id="txt6c"></div>
            </div>

            <div class="txt" v-if="state.pm.templateId == 'TW'">图片</div>
            <div v-if="state.pm.templateId == 'TW'">
              <el-image style="width: 260px; height: 150px" fit="contain" :src="state.pm.tempPic"
                :preview-src-list="[state.pm.tempPic]" object-fit="cover"></el-image>
            </div>

            <div class="txt" v-if="state.pm.templateId == 'ZP'">实时抓拍</div>
            <div class="sszp" v-if="state.pm.templateId == 'ZP'">
              <div class="zpone" v-for="(item, inx) in state.data3" :key="inx">
                <img class="empimg" src="/images/zp.png" v-if="state.data3.length < (inx + 1)" />
                <img class="img" :src="item" v-if="state.data3.length >= inx && inx < 3" />
              </div>
            </div>

            <div class="txt" v-if="state.pm.templateId == 'SP' || state.pm.templateId == 'ZP'">视频</div>
            <div class="videoc" v-if="state.pm.templateId == 'SP' || state.pm.templateId == 'ZP'">
              <onem :vid="state.pm.tempDeviceId" />
            </div>
          </div>
          <div class="ys" v-if="state.iinx == 2">
            <div class="txt">人脸实时抓拍</div>
            <div class="tbc" id="tb1">

            </div>
            <div class="txt">车辆实时抓拍</div>
            <div class="tbc" id="tb2">

            </div>
          </div>
          <div class="xx" v-if="state.iinx == 3">
            <div class="txt" style="height:40px;">设备名称：{{ state.pm.deviceName }}</div>
            <div class="txt" style="height:40px;">设备编号：{{ state.pm.cameraIndexCode }}</div>
            <div class="txt" style="height:40px;">安装位置：{{ state.pm.part }}</div>
          </div>

          <div class="btns" v-if="props.isd">
            <el-button class="cusb1" style="width:86px;" @click="todel">删除</el-button>
            <el-button class="cusb2" style="width:86px;" @click="emit('close')">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps({
  oneData: Object,
  isd: {
    default: false,
    type: Boolean
  }
});
const emit = defineEmits(["close", "reget"]);
const state = reactive({
  iinx: 1,
  imgs: [1, 2, 3],
  vid: '1766027258688049158',
  pm: {},
  zps: [1, 2, 3],
  chart1: null,
  chart2: null,
  chart3: null,
  data1: [],
  data2: [],
  data3: [],
  data4: [
    { tp: 'CBTKQ', data: [{ nm: '船舶数量/艘', v: '25' }, { nm: '在港数量/艘', v: '15' }, { nm: '异常数量/艘', v: '2' }] },
    { tp: 'JMQ', data: [{ nm: '家庭数量/户', v: '10' }, { nm: '男性比例', v: '70%' }, { nm: '女性比例', v: '30%' }] },
    { tp: 'TCC', data: [{ nm: '在场数量/辆', v: '20' }, { nm: '离场数量/辆', v: '15' }, { nm: '进场数量/辆', v: '35' }] }
  ],
  data5: [
    { tp: 'CBTKQ', data: [{ v1: '津汉渔-052', v2: '5', v3: '5' }, { v1: '津汉渔-666', v2: '4', v3: '4' }, { v1: '津汉渔-222', v2: '6', v3: '6' }, { v1: '津汉渔-263', v2: '3', v3: '3' }] },
    { tp: 'JMQ', data: [{ v1: '0-18岁', v2: '15', v3: '6' }, { v1: '19-35岁', v2: '10', v3: '8' }, { v1: '36-60岁', v2: '30', v3: '10' }, { v1: '60岁以上', v2: '5', v3: '3' }] },
    { tp: 'TCC', data: [] },
    { tp: 'JYXF', data: [{ v1: '救生衣', v2: '30' }, { v1: '就生绳', v2: '15' }, { v1: '救生筏', v2: '45' }, { v1: '小型消防车', v2: '1' }, { v1: '消防泵', v2: '1' }, { v1: '推车式干式灭火器', v2: '5' }] },
    { tp: 'BHQ', data: [{ v1: '12:00', v2: '20人' }, { v1: '13:00', v2: '30人' }, { v1: '15:00', v2: '10人' }, { v1: '16:00', v2: '25人' }] },
    { tp: 'BGQ', data: [] }
  ],
})
watch(() => state.iinx, (newval) => {
  if (newval == 2) {
    setTimeout(() => {
      state.chart1 = echarts.init(document.getElementById('tb1'), 'dark');
      state.chart2 = echarts.init(document.getElementById('tb2'), 'dark');
      chart()
    }, 300);
  }
})
const getEvent = () => {
  useApi.post("/arhome/dashboard/alarm", { type: 'vehicle' }).then((res) => {
    let data = res.data.eventlist
    let list = []
    data.forEach(element => {
      list.push({ v1: element.pnorlp, v2: element.alarmDetail })
    });
    state.data5[2].data = list
  });
}
const getEvent1 = () => {
  useApi.post("/arhome/stat/tagshipcap", {}).then((res) => {
    let dasumListta = res.data.sumList
    let shipList = res.data.shipList
    
    let list0 = []
    dasumListta.forEach(element => {
      list0.push({ nm: element.title, v: element.value })
    });
    let list = []
    shipList.forEach(element => {
      list.push({ v1: element.shipCode, v2: element.inCount,v3: element.outCount })
    });
    state.data4[0].data = list0
    state.data5[0].data = list
  });
}
const getEvent2 = () => {
  useApi.post("/arhome/stat/tagfilesdevices", {}).then((res) => {
    let data = res.data.list
    let list = []
    data.forEach(element => {
      list.push({ v1: element.deviceName, v2: element.fileCount })
    });
    state.data5[3].data = list
  });
}
const getEvent3 = () => {
  useApi.post("/arhome/stat/tagenterprise", {}).then((res) => {
    let data = res.data.list
    let list = []
    data.forEach(element => {
      list.push({ v1: element.entName, v2: element.entLinkphone })
    });
    state.data5[5].data = list
  });
}
const getEvent4 = () => {
  useApi.post("/arhome/stat/tagvehicle", {}).then((res) => {
    let data = res.data.sumList
    let list = []
    data.forEach(element => {
      list.push({ nm: element.title, v: element.value })
    });
    state.data4[2].data = list
  });
}
const chart = () => {
  let option = {
    backgroundColor: '',
    color: ['#59BCFB', '#00DDFF'],
    grid: {
      top: '6%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar'
      }
    ]
  };
  let op1 = { ...option }
  op1.xAxis.data = state.data1.map(x => x.xaxis)
  op1.series[0].data = state.data1.map(x => x.stateCount)
  state.chart1.setOption(op1)
  let op2 = { ...option }
  op2.xAxis.data = state.data2.map(x => x.xaxis)
  op2.series[0].data = state.data2.map(x => x.stateCount)
  state.chart2.setOption(op2)
}
const getData = () => {
  useApi.post("/arhome/camera/tagDetail", { tagId: props.oneData.tagId }).then((res) => {
    state.pm = res.data.tagInfo
    state.data1 = res.data.faceStats
    state.data2 = res.data.vehicleStats
    state.data3 = res.data.tempCapture
    if (state.pm.templateId == 'TCC') {
      getEvent()
      getEvent4()
    }
    if (state.pm.templateId == 'CBTKQ') {
      getEvent1()
    }
    if (state.pm.templateId == 'JYXF') {
      getEvent2()
    }
    if (state.pm.templateId == 'BGQ') {
      getEvent3()
    }
    if (state.pm.templateId == 'CBTKQ' || state.pm.templateId == 'JMQ') {
      setTimeout(() => {
        state.pm.templateId == 'CBTKQ' ? chart3() : chart4()
      }, 1000);
    }
  });
}
const chart3 = () => {
  state.chart3 = echarts.init(document.getElementById('txt6c'), 'dark');
  let option = {
    backgroundColor: '',
    color: ['#59BCFB', '#00DDFF'],
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '6%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ["津汉渔04556", "津汉渔04558", "津汉渔04028", "津汉渔04041", "津汉渔04987", "津汉渔04001", "津汉渔04056", "津汉渔04058", "津汉渔04222", "津汉渔04073", "津汉渔04074", "津汉渔04079"]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "进港次数",
        type: "bar",
        data: [2, 1, 2, 2, 1, 1, 3, 1, 1, 1, 1, 1]
      },
      {
        name: "出港次数",
        type: "bar",
        data: [3, 2, 2, 2, 2, 2, 3, 2, 2, 2, 2, 2]
      }
    ]
  };
  state.chart3.setOption(option)
}
const chart4 = () => {
  state.chart3 = echarts.init(document.getElementById('txt6c'), 'dark');
  let option = {
    backgroundColor: '',
    color: ['#59BCFB', '#00DDFF'],
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '6%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ["0-18岁", "19-35岁", "36-60岁", "60岁以上"]
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "男性",
        type: "bar",
        data: [5, 6, 10, 5]
      },
      {
        name: "女性",
        type: "bar",
        data: [3, 6, 2, 2]
      }
    ]
  };
  state.chart3.setOption(option)
}
const todel = () => {
  let pm = {
    tagId: state.pm.tagId
  }
  ElMessageBox.confirm(
    '确认删除当前标签？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      useApi.post("/arhome/camera/deletetag", pm).then((res) => {
        emit('reget')
      })
    })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.cont {
  width: 300px;
}

.dia {
  margin-top: 5px;
  width: 300px;
  display: flex;
  flex-direction: column;

  .header {
    width: 300px;
    height: 38px;
    background-image: url('/images/bg03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .title {
      margin-left: 30px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
    }

    .close {
      margin: 8px 2px 0 auto;
      width: 30px;
      height: 30px;
      cursor: pointer;
      opacity: 0.5;
    }
  }

  .content {
    width: 300px;
    min-height: 200px;
    background-image: url('/images/bg04.png'), url('/images/bbg.png');
    background-size: 100% 10%, 100% 100%;
    background-position-y: 103%, 0;
    background-repeat: no-repeat;
    padding: 10px 10px 12px 10px;

    .list {
      width: 100%;
      height: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background-image: url('/images/mb1.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .txt {
        height: 28px;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;
      }

      .txt3 {
        width: 100%;
        min-height: 28px;
        max-height: 100px;
        overflow-y: auto;
        padding: 5px 8px;
        background: #003D6399;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 400;
        white-space: pre-line;
      }

      .txt4 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;

        .card {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100px;

          .yuan {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
            color: #FFFFFF;
            background-image: url('/images/ty.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }

          .btit {
            margin-top: 5px;
            width: fit-content;
            font-weight: 500;
            font-size: 12px;
            color: #FFFFFF;
          }
        }
      }

      .txt5 {
        margin-left: 5px;
        width: 250px;
        max-height: 220px;
        overflow-y: auto;
        overflow-x: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;

        .head {
          width: 250px;
          height: 30px;
          background: rgba(0, 37, 80, 0.55);
          padding-left: 5px;
          display: flex;
          align-items: center;
        }

        .row0 {
          width: 250px;
          min-height: 30px;
          padding-left: 5px;
          display: flex;
          align-items: center;
        }

        .row1 {
          width: 250px;
          min-height: 30px;
          background: rgba(0, 37, 80, 0.25);
          padding-left: 5px;
          display: flex;
          align-items: center;
        }
      }

      .txt6 {
        margin-left: 5px;
        width: 250px;
        height: 158px;
        margin-top: 5px;

        .chart {
          width: 100%;
          height: 100%;
        }
      }

      .videoc {
        width: 260px;
        height: 150px;
      }

      .tbc {
        width: 260px;
        height: 120px;
      }

      .sszp {
        display: flex;
        justify-content: space-between;

        .zpone {
          width: 80px;
          height: 90px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(0deg, rgba(11, 81, 127, 0.5) 0%, rgba(11, 81, 127, 0.5) 100%);
          box-shadow: inset 0px 0px 16px 0px rgba(0, 61, 99, 0.87);

          .empimg {
            width: 28px;
            height: 28px;
          }

          .img {
            width: 80px;
            height: 90px;
          }
        }
      }

      .btns {
        margin-top: 20px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;

  .btn {
    width: 80px;
  }
}

:deep(.el-select) {
  width: 260px;
  --el-input-text-color: #ffffff;

  .el-select__wrapper {
    background: #003D6399;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}

:deep(.el-textarea) {
  --el-input-bg-color: #003D6399;
  --el-input-text-color: #ffffff;
}

:deep(.el-upload) {
  width: 260px !important;
  height: 150px !important;
  border-radius: 0px !important;
  background: #003D6399;
  border: none;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100% !important;
  height: 150px !important;
}

:deep(.el-upload-list--picture-card) {
  :nth-child(even) {
    display: none;
  }
}

/* 针对WebKit内核的自定义 */
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

::-webkit-scrollbar-track {
  background-color: #333333;
}

::-webkit-scrollbar-thumb {
  background-color: #51adeb;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #51adeb99;
}

/* 针对Firefox的自定义 */
html {
  scrollbar-color: #51adeb #333333;
  scrollbar-width: thin;
}
</style>